<template>
	<view class="content">
        <image v-for="(item,index) in bgIcon" :key="index" :style="{left:item.left+'rpx',top:item.top+'rpx'}" class="bg-icon" src="@/static/bg-icon.png"></image>
		    <div v-show="false" class="author">作者QQ：2282017407@qq.com</div>
        <u-transition duration="600" :mode="transMode" :show="transShow">
          <div :style="'margin-top:'+levelMarginTop+'rpx'" class="level">第 {{ number2str }} 关</div>
          <div class="box">
            <view v-for="(item0,index0) in allCards" :key="index0">
              <div @click="slectedCard(item,index,$event,index0)" v-for="(item,index) in item0" :key="index"
                   :style="{left:item.left,top:item.top,zIndex:item.zIndex}" :class="item.isBottom?'disble':'show ' +transitionClass" class="card">
                <img :src="`/static/icon/${item.icon}.png`" :pid="item.pId" :alt="item.layer">
                <div class="bot"></div>
              </div>
            </view>
          </div>
          <!--选择的卡片-->
        </u-transition>
          <!--选择的卡片-->
          <div class="btn-toup" v-if="transShow">
            <div class="up-list">
              <div @click="slectedCard(item,index,$event)" v-for="(item,index) in upCards" :key="index" class="card"><img :src="`/static/icon/${item.icon}.png`"></div>
            </div>
            <div class="bottom">
              <div v-for="(item,index) in slectedCardList" :key="index" class="card">
                <img :src="`/static/icon/${item.icon}.png`" :alt="index">
              </div>
            </div>
            <!--道具列表-->
            <div class="btn">
              <Btn :chance="toUpChance" :isDis="toUpIsDis" text="移除道具" @click="toUp"></Btn>
              <Btn :chance="backHistoryChance" :isDis="backHistoryIsDis" text="撤回道具" @click="backHistory"></Btn>
              <Btn :chance="disruptDataChance" :isDis="disruptDataIsDis" text="打乱道具" @click="disruptData"></Btn>
            </div>
          </div>
		    <!--作者-->
      <div v-show="false" class="author">作者QQ：2282017407@qq.com</div>
			<view><u-modal :showConfirmButton="false" :show="showModal" :title="modalTitle" :content='modalContent'></u-modal></view>
      <Alert Id="302f8d938c69803f" @click="startPlayAd" @clickReStart="initData" :title="aTitle" :text="aText" :yesBtn="aYesBtn" :clickType="aClickType" :icon="aIcon" ref="alert"></Alert>
	</view>
</template>

<script>
import Btn from "@/components/btn.vue"
import Alert from "@/components/alert.vue"
	//icon生成几个
	const initIconNumber = 15;
  const iconGroup = {
    level2:120,
    level3:150,
    default:270
  };
  const sortType = 1 ; //1：类似于(田)字   2:乱序
  //打乱动画重复数
  let animationHistory = 0;
  //撤回了没有
  let isBack = false;
  //是否上去了没
  let isToUp = false;
  //是否复活了吗
  let isFuHuo=false;
  //难不难  true:难   false：简单
  const isHard = false;
	export default {
		components: {
			Btn,Alert
		},
		data(){
	    return{
        bgIcon:[
          {left:200,top:150},
          {left:400,top:300},
          {left:700,top:200},
          {left:100,top:200},
          {left:300,top:450},
          {left:120,top:600},
          {left:80,top:500},
          {left:140,top:600},
          {left:230,top:700},
          {left:720,top:980},
          {left:400,top:750},
          {left:500,top:950},
          {left:600,top:1300},
          {left:200,top:850},
          {left:650,top:800},
          {left:130,top:1000},
          {left:230,top:1200},
          {left:330,top:1400},
          {left:530,top:1600},
        ],
        //按钮组件
        toUpIsDis:false,
        backHistoryIsDis:false,
        disruptDataIsDis:false,
        toUpChance:"+",
        backHistoryChance:"+",
        disruptDataChance:"+",
        //弹出框组件
        aTitle:'',
        aText:'',
        aYesBtn:'',
        aIcon:'',
        aClickType:'',
        //页面动画
        transShow:false,
        transMode:'fade-down',
        //u-modal
        modalTitle:"提示",
        modalContent:"",
        showModal:false,
        //第几关
        level:1,
        //是否输了？
        isLost:false,
	      //icon生成几个
	      iconNumber:initIconNumber,
	      //保存所有棋子
	      allCards:[
	        // {id:1,order:1,icon:'',left:'0',top:'0'},
	        // {id:2,order:1,icon:'',left:'50px',top:'0'},
	      ],
	      //卡片定位数组
	      cardPositionList:[],
	      //选择的卡片
	      slectedCardList:[],
	      //记录选择的卡片，用于撤回
	      historySlectedCard:[],
        //上去撤回三张
        upCards:[],
	      //当前选择的卡片
	      currentSlectedCard:{},
        //给卡片动画class
        transitionClass:'',
	      //icon保存
	      iconList:[
	        {order:0,icon:1,bg:'#c08020'},
	        {order:1,icon:2,bg:'#48a794'},
	        {order:2,icon:3,bg:'#4869a7'},
	        {order:3,icon:4,bg:'#d4624f'},
	        {order:4,icon:5,bg:'#452b26'},
	        {order:5,icon:6,bg:'#ffffff'},
	        {order:6,icon:7,bg:'#be4eca'},
	        {order:7,icon:8,bg:'#b7bc36'},
	        {order:8,icon:9,bg:'#424c88'},
	        {order:9,icon:10,bg:'#f70911'},
          {order:10,icon:11,bg:'#f70911'},
          {order:11,icon:12,bg:'#f70911'},
          {order:12,icon:13,bg:'#f70911'},
          {order:13,icon:14,bg:'#f70911'},
          {order:14,icon:15,bg:'#f70911'},
	      ]
	    }
	  },
    onShareTimeline(res) {
      return {
        title: '智力不够，就不要来挑战这个游戏了'
      }
    },
	  created() {
      new Promise((resolve => {
        setTimeout(()=>{
          this.transShow = true;
          resolve()
        },500)
      })).then(()=>{
        this.initData();
        uni.$u.mpShare.title = '智力不够，就不要来挑战这个游戏了';
      })
	  },
    onShow(){
      this.bgMp3();
    },
	  computed:{
	    number2str(){
        return this.level;
	      return ['一','二','三','四','五','六','七','八','九','十'][this.level-1]
	    },
      levelMarginTop(){
        // #ifdef MP-WEIXIN
        //获取胶囊按钮的布局位置信息，坐标信息以屏幕左上角为原点
        let custom = wx.getMenuButtonBoundingClientRect()
        //导航栏高度 = 状态栏到胶囊的间距（胶囊距上距离-状态栏高度） * 2 + 胶囊高度 + 状态栏高度。
        this.customBar = custom.bottom + custom.top - uni.$u.sys().statusBarHeight
        // #endif
        return this.customBar
      }
	  },
	  methods:{
      //播放广告
      async startPlayAd(){
        let res = await this.$refs.alert.adStart();
        if (res.isEnded){
          let timer=0
          if(res?.type){
            timer=2000;
          }
          //disruptData
          //toUp
          //backHistory
          setTimeout(()=>{
            uni.setStorage({
              key:this.aClickType,
              data: this.aClickType,
              success: ()=> {
                this.$refs.alert.close();
                setTimeout(()=>{
                  switch (this.aClickType){
                    case "disruptData":this.disruptDataChance=1;this.disruptData();break;
                    case "toUp":this.toUpChance=1;break;
                    case "backHistory":this.backHistoryChance=1;break;
                    case "fuHuo":
                      this.fuhuoStart()
                      break;
                  }
                },1000)
              }
            })
            console.log("执行了")
          },timer)
        }else {}
      },
      //打乱未使用的卡片
      disruptData(){
        this.aClickType = "disruptData";
        if (!uni.getStorageSync('disruptData')){
          this.aIcon = "right";
          this.aTitle="打乱道具";
          this.aText="随机打乱未使用的所有牌";
          this.$refs.alert.open();
          return;
        }else {
          this.disruptDataIsDis = true;
        }
        animationHistory++;
        if (animationHistory > 2){
          this.transitionClass = '';
          return;
        }
        this.transitionClass = 'transitionClass';
        let random = 0;
        let layIndex = 0;
        let newPos = 0;
        this.fn2arrConvert1Arr(this.allCards).forEach(item=>{
          layIndex++;
          random = Math.floor(Math.random() * (this.cardPositionList.length-1));
          item['left'] = this.cardPositionList[random].left;
          item['top'] = this.cardPositionList[random].top;
          item['l'] = Number(this.cardPositionList[random].left.replace('rpx',''));
          item['t'] = Number(this.cardPositionList[random].top.replace('rpx',''));
          item['zIndex'] = layIndex;
          item['layer'] = layIndex;
          newPos++;
          if (newPos > (this.cardPositionList.length-1)){
            newPos=0;
          }
        })
        this.disableCardConverShowCard()
        this.fn1ArrConvert2Arr(this.fn2arrConvert1Arr(this.allCards))
        setTimeout(()=>{
          this.disruptData();
        },800)
      },
		  //modal函数
		  modalShow(content){
			  this.showModal = true;
			  this.modalContent=content;
			  setTimeout(()=>{
				 this.showModal = false; 
			  },1000)
		  },
      //上去
      toUp(){
        if (isToUp) return;
        this.aClickType = "toUp";
        if (!uni.getStorageSync('toUp')){
          this.aIcon = "left";
          this.aTitle="移除道具";
          this.aText="撤回三张牌并把他们堆放到旁边";
          this.$refs.alert.open();
          return;
        }
        if (this.historySlectedCard.length < 1){
          return;
        }
        //禁止点击按钮
        this.toUpIsDis = true;
        for (let i in this.historySlectedCard){
          if (i < 3){
            this.upCards.push(this.historySlectedCard[i])
          }
        }
        this.upCards.sort((a,b)=>{
          return a.order - b.order;
        })
        let upCardId = [];
        for (let i in this.upCards){
          upCardId.push(this.upCards[i].id)
        }
        this.slectedCardList = this.slectedCardList.filter(item=>{
          return !upCardId.includes(item.id)
        })
        this.historySlectedCard = this.historySlectedCard.filter(item=>{
          return !upCardId.includes(item.id)
        })
        isToUp = true;
        this.isLost = false;
      },
      fuhuoStart(){
        if (!uni.getStorageSync('fuHuo')){
          return;
        }
        if (this.historySlectedCard.length < 1){
          return;
        }
        for (let i in this.historySlectedCard){
          if (i < 3){
            this.upCards.push(this.historySlectedCard[i])
          }
        }
        this.upCards.sort((a,b)=>{
          return a.order - b.order;
        })
        let upCardId = [];
        for (let i in this.upCards){
          upCardId.push(this.upCards[i].id)
        }
        this.slectedCardList = this.slectedCardList.filter(item=>{
          return !upCardId.includes(item.id)
        })
        this.historySlectedCard = this.historySlectedCard.filter(item=>{
          return !upCardId.includes(item.id)
        })
        isFuHuo=true;
        this.isLost = false;

      },
	    //撤回最后一个
	    backHistory(){
        if (isBack) return;
        this.aClickType = "backHistory";
        if (!uni.getStorageSync('backHistory')){
          this.aIcon = "center";
          this.aTitle="撤回道具";
          this.aText="撤回最近的一张牌并把他放到原位置";
          this.$refs.alert.open()
          return;
        }
        //获取最后一个选中的
        let lastSlect = this.historySlectedCard[this.historySlectedCard.length-1];
        if (this.historySlectedCard.length < 1){
          return;
        }
        //禁止点击按钮
        this.backHistoryIsDis = true;
	      //消除记录里面的
	      this.historySlectedCard = this.historySlectedCard.filter(item=>{
	        return item.id !== lastSlect.id;
	      })
	      //消除选择里面的
	      this.slectedCardList = this.slectedCardList.filter(item=>{
	        return item.id !== lastSlect.id;
	      })
	      //重新给allCards添加撤回的卡片
        if (this.allCards[lastSlect.pindex]){
          this.allCards[lastSlect.pindex].push(lastSlect);
        }else {
          this.allCards[lastSlect.pindex-2].push(lastSlect);
        }
        this.isCover("fn2arrConvert1Arr")
        isBack = true;
        this.isLost = false;
	    },
	    //返回上一关并且重新开始
	    backLevel(){
	      this.level = 1;
	      this.iconNumber = initIconNumber;
	      this.initData();
	    },
	    //点击卡片
	    slectedCard(item,index,event,parentIndex){
          //如果输了就不能选择
          if (this.isLost){
            if(isFuHuo){
              //复活一次
              this.aIcon = "center";
              this.aClickType = "fuHuo0";
              this.aTitle="你输了，重新开始吧";
              this.aText="没有机会了，你输了，重新开始吧";
              this.$refs.alert.open()
              return;
            }
            this.aIcon = "fuhuo";
            this.aClickType = "fuHuo";
            this.aTitle="你输了，复活吗？";
            this.aText="复活并使用移除道具";
            this.$refs.alert.open()
            return;
          }
	        //检测元素是否被覆盖
		      if (!item.isBottom){
            this.clickMp3()
            //
            this.disableCardConverShowCard()
            //当前选择的卡片
            this.currentSlectedCard=item;
            if (parentIndex >= 0){
              item.pindex=parentIndex;
              //删除allCards里面
              this.allCards[parentIndex] = this.allCards[parentIndex].filter(card=>{
                return card.id !== item.id;
              });
            }else {
              //删除upCards里面
              this.upCards = this.upCards.filter(card=>{
                return card.id !== item.id;
              });
            }
            //记录选择的卡片，用于撤回
            this.historySlectedCard.push(item);
            //然后选择
            this.slectedCardList.push(item);
            //选择的卡片排序
            this.slectedCardList.sort((a,b)=>{
              return a.order - b.order;
            })
            //选择的卡片中有3个同样的卡片的话，消除
            setTimeout(()=>{
              this.remove3Card()
            },200)
	       }
	    },
	    //选择的卡片中有3个同样的卡片的话，消除
	    remove3Card(){
	      let currentNum=0;
	      this.slectedCardList.forEach(item=>{
	        if(item.icon===this.currentSlectedCard.icon){
	          currentNum++;
	        }
	      })
	      if (currentNum >= 3){
          this.selectedRemoveMp3()
	        this.slectedCardList = this.slectedCardList.filter(item=>{
	          return item.icon !== this.currentSlectedCard.icon;
	        })
	        //消除记录里面的
	        this.historySlectedCard = this.historySlectedCard.filter(item=>{
	          return item.icon !== this.currentSlectedCard.icon;
	        })
	      }
	      //赢了
		    let allCardsArr = this.fn2arrConvert1Arr(this.allCards);
	      if(allCardsArr.length ===0 && this.upCards.length ===0){
          this.transShow = false;
          this.level = this.level+1;
          setTimeout(()=>{
            this.transMode='slide-right';
            this.transShow = true;
            switch (this.level){
              case 2:this.iconNumber = iconGroup.level2 ; break;
              case 3:this.iconNumber = iconGroup.level3 ; break;
              default : this.iconNumber = iconGroup.default; break;
            }
            this.initData()
          },1000)
	      }

        //如果选择超出了7个，就输了
        if(this.slectedCardList.length >= 7){
          if(isFuHuo){
            //复活一次
            this.aIcon = "center";
            this.aClickType = "fuHuo0";
            this.aTitle="你输了，重新开始吧";
            this.aText="没有机会了，你输了，重新开始吧";
            this.$refs.alert.open()
            return;
          }
          this.aClickType = "fuHuo";
          this.aIcon = "fuhuo";
          this.aTitle="你输了，复活吗？";
          this.aText="复活并使用移除道具";
          this.$refs.alert.open()
          this.isLost = true;
        }
	    },
      //初始化一些变量
      initVar(){
        //清理session
        uni.clearStorage();
        //弹出框关闭
        this.$refs.alert.close();
        this.aClickType=""; //弹出框点击的按钮类型
        //按钮组件
        this.toUpIsDis=false;
        this.backHistoryIsDis=false;
        this.disruptDataIsDis=false;
        this.toUpChance="+";
        this.backHistoryChance="+";
        this.disruptDataChance="+";
        //是否上去判断变量
        isToUp=false;
        //是否撤回判断变量
        isBack=false;
        //打乱的时候打乱几次
        animationHistory=0;
        //是否复活了么
        isFuHuo=false;
        //是否输
        this.isLost = false;
        //所有卡片
        this.allCards = [];
        //卡片定位数组
        this.cardPositionList = [];
        //选择的卡片
        this.slectedCardList = [];
        //当前选择的卡片
        this.currentSlectedCard= {};
        //上去数组清空
        this.upCards=[];
        //选择记录清空
        this.historySlectedCard=[];
        //初始化完毕
      },
	    //生成数据
	    initData(){
        this.initVar()
	      //第一层
	      let left=0;
	      let top=0;
	      for (let i= 0; i < 6;i++){//列
	        for (let j= 0; j < 6;j++){//行
	          this.cardPositionList.push({icon:1,left:left+'rpx',top:top+'rpx'})
	          left+=100;
	        }
	        left=0;
	        top+=100;
	      }
	      //第二层
	      left=50;
	      top=50;
	      for (let i= 0; i < 5;i++){//列
	        for (let j= 0; j < 5;j++){//行
	          this.cardPositionList.push({left:left+'rpx',top:top+'rpx'})
	          left+=100;
	        }
	        left=50;
	        top+=100;
	      }
        if (this.level > 1){
          //第三层
          left=100;
          top=100;
          for (let i= 0; i < 4;i++){//列
            for (let j= 0; j < 4;j++){//行
              this.cardPositionList.push({left:left+'rpx',top:top+'rpx'})
              left+=100;
            }
            left=100;
            top+=100;
          }
          //第四层
          left=150;
          top=150;
          for (let i= 0; i < 3;i++){//列
            for (let j= 0; j < 3;j++){//行
              this.cardPositionList.push({left:left+'rpx',top:top+'rpx'})
              left+=100;
            }
            left=150;
            top+=100;
          }
          //第五层
          left=200;
          top=200;
          for (let i= 0; i < 2;i++){//列
            for (let j= 0; j < 2;j++){//行
              this.cardPositionList.push({left:left+'rpx',top:top+'rpx'})
              left+=100;
            }
            left=200;
            top+=100;
          }
          //第六层
          left=250;
          top=250;
          for (let i= 0; i < 1;i++){//列
            for (let j= 0; j < 1;j++){//行
              this.cardPositionList.push({left:left+'rpx',top:top+'rpx'})
              left+=100;
            }
            left=250;
            top+=100;
          }
        }
	      //生成随机图标
	      this.generateRandomIcon();
	    },
	    //生成随机图标
	    generateRandomIcon(){
	      let random = 0;
        //赢的可能性随机
        let hardRand = Math.ceil(Math.random() * 10);  //1~10
        //3个一组
        let groupNumber = 3;
	      for(let i=0; i < this.iconNumber; i++){
	        //难度设置
          if (isHard && this.level > 1 && hardRand !== 1 ){
            //2个一组
            if ( i < 45){ //几个组捣乱  x/3=几个组
              console.log(hardRand+"-难")
              groupNumber=2;
            }else {
              groupNumber = 3;
            }
          }
          else{
            if (this.level > 1){
              // console.log(hardRand+"-简单")
            }
          }//难度设置end
          //每三次循环，一次生成随机数
	        if (i % groupNumber === 0){
	          random = Math.floor(Math.random()*15);
	        }
	        this.allCards.push({
	          id:i,
	          icon:this.iconList[random].icon,
	          order:this.iconList[random].order,
	          bgColor:this.iconList[random].bg,
	        })
	        //实现allCards随机排序
	        this.allCards.sort(()=>{
	          return Math.random() > 0.5 ? -1 : 1;
	        })

		    }//end 随机排序
	      //给卡片重新定位
	      //随机位置
	      random = 0;
        let layIndex=0;
        let newPos = 0;
        let layoutLeft=0;
        let layoutRight=0;
        let layoutRightBottom=0;
        let layoutLeftBottom=0;
        let indexPx = 6;
	      this.allCards.forEach(item=>{
          random = Math.floor(Math.random() * (this.cardPositionList.length-1));
          if(sortType===2 || this.level===1){ // || this.level===1
            item['l'] = Number(this.cardPositionList[random].left.replace('rpx',''));
            item['t'] = Number(this.cardPositionList[random].top.replace('rpx',''));
            item['left'] = this.cardPositionList[random].left;
            item['top'] = this.cardPositionList[random].top;
          } else{
            if(layIndex >= 0){
              item['left'] = this.cardPositionList[newPos].left;
              item['top'] = this.cardPositionList[newPos].top;
              item['l'] = Number(this.cardPositionList[newPos].left.replace('rpx',''));
              item['t'] = Number(this.cardPositionList[newPos].top.replace('rpx',''));
            }
            if (layIndex > 90){
              item['left'] = layoutLeft * indexPx + 'rpx';
              item['top'] = 0 + 'rpx';
              item['l'] = layoutLeft * indexPx;
              item['t'] = layoutLeft * indexPx;
              layoutLeft++;
            }
            if (layIndex > 105){
              item['left'] =500 - (layoutRight * indexPx) + 'rpx';
              item['top'] =0 + 'rpx';
              item['l'] =500-(layoutRight * indexPx) * indexPx;
              item['t'] =layoutRight * indexPx;
              layoutRight++;
            }
            if (layIndex > 120){
              item['left'] = layoutLeftBottom * indexPx + 'rpx';
              item['top'] = 500 + 'rpx';
              item['l'] = layoutLeftBottom * indexPx;
              item['t'] = layoutLeftBottom * indexPx;
              layoutLeftBottom++;
            }
            if (layIndex > 135){
              item['left'] =500 - (layoutRightBottom * indexPx) + 'rpx';
              item['top'] = 500 + 'rpx';
              item['l'] =500-(layoutRightBottom * indexPx) * indexPx;
              item['t'] =layoutRight * indexPx;
              layoutRightBottom++;
            }
            if (layIndex > 150){
              item['left'] = this.cardPositionList[random].left;
              item['top'] = this.cardPositionList[random].top;
              item['l'] = Number(this.cardPositionList[random].left.replace('rpx',''));
              item['t'] = Number(this.cardPositionList[random].top.replace('rpx',''));
            }
          }
          layIndex++;
          item['layer'] = layIndex;
          item['zIndex'] = layIndex;
          newPos++;
          if (newPos > (this.cardPositionList.length-1)){
            newPos=0;
          }
	      })
        //assitItem
		  //检测卡片是否被覆盖
		  this.isCover("oldData");
		  this.fn1ArrConvert2Arr(this.allCards)
	    },
      //一维数组转换二维数组
      fn1ArrConvert2Arr(allCards){
        let newArr = [];
        while(allCards.length > 0) {
          newArr.push(allCards.splice(0, 3));
        }
        this.allCards = newArr;
      },
		//二维数组转换一维数组
		fn2arrConvert1Arr(arr) {
　　　 return [].concat(...arr.map(item => Array.isArray(item) ? this.fn2arrConvert1Arr(item) : item))
　　},
		disableCardConverShowCard(){
        new Promise((resolve)=>{
          let newArr = this.fn2arrConvert1Arr(this.allCards);
          newArr.forEach(item=>{
            item.isBottom = false;
          })
          resolve()
        }).then(()=>{
          //检测卡片是否被覆盖
          this.isCover("fn2arrConvert1Arr")
        })
		},
      /**
       * 专门用于 isCover()函数
       */
    coverCommon(item,item1){
        if(
            item1.layer > item.layer && item1.id !== item.id &&
            (
                (item1.l === item.l - 50 && item1.t === item.t - 50) ||
                (item1.l === item.l + 50 && item1.t === item.t + 50) ||
                (item1.l === item.l + 50 && item1.t === item.t - 50) ||
                (item1.l === item.l - 50 && item1.t === item.t + 50)
            )
        ){
          item.isBottom = true;
          item.pId = item1.id;
        }
    },
      /**
       * //检测卡片是否被覆盖
       * type---: oldData:原始数据，fn2arrConvert1Arr：表示二位数组转换一维数组
       */
    isCover(type){
      if(type=="oldData"){
        this.allCards.forEach(item=>{
          this.allCards.find(item1=>{
            this.coverCommon(item,item1)
          })
        })
      }else{
        //fn2arrConvert1Arr
        let newArr = this.fn2arrConvert1Arr(this.allCards);
        newArr.forEach(item=>{
          newArr.find(item1=>{
            this.coverCommon(item,item1)
          })
        })
      }
    },
      bgMp3(){
        ///static/mp3/bg.mp3
        const innerAudioContext = uni.createInnerAudioContext();
        innerAudioContext.autoplay = true;
        innerAudioContext.loop = true;
        innerAudioContext.volume = 0.1;
        //https://res.wx.qq.com/voice/getvoice?mediaid=Mzg4OTAyMDk3OF8xMDAwMDY0Njk=
        innerAudioContext.src = 'https://res.wx.qq.com/voice/getvoice?mediaid=Mzg4OTAyMDk3OF8xMDAwMDY0Njk=';
        innerAudioContext.onPlay(() => {

        });
        innerAudioContext.onError((res) => {
          console.log(res.errMsg);
        });
      },
      clickMp3(){
        ///static/mp3/bg.mp3
        const innerAudioContext = uni.createInnerAudioContext();
        innerAudioContext.autoplay = true;
        innerAudioContext.volume = 1;
        innerAudioContext.src = '/static/mp3/click.mp3';
        innerAudioContext.onPlay(() => {

        });
        innerAudioContext.onError((res) => {
          console.log(res.errMsg);
        });
      },
      selectedRemoveMp3(){
        ///static/mp3/bg.mp3
        const innerAudioContext = uni.createInnerAudioContext();
        innerAudioContext.autoplay = true;
        innerAudioContext.volume = 1;
        innerAudioContext.src = '/static/mp3/ok.mp3';
        innerAudioContext.onPlay(() => {

        });
        innerAudioContext.onError((res) => {
          console.log(res.errMsg);
        });
      }
	  }
	}
</script>

<style lang="scss" scoped>
	.content{
	  background-color: #c3ff8b;
    position: relative;
    height: 100vh;
    overflow: hidden;
    .bg-icon{
      z-index: 0;
      position: absolute;
      left: 100rpx;
      top: 150rpx;
      width: 80rpx!important;
      height: 44rpx!important;
      animation:bg-icon .45s infinite;
    }

	}
  @keyframes bg-icon {
    0%{transform:scaleY(1.4)}
    to{transform:scale(1)}
  }
	.box{
    width:600rpx;
    height:600rpx;
	  margin: 100rpx auto 0;
	  position: relative;
	  .card{
	    position: absolute;
	  }
	}
  .btn-toup{
    position: absolute;
    bottom: 40rpx;
    width: 100%;
    .up-list{
      display: flex;
      flex-direction: row;
      justify-content: center;
      margin-bottom: 15rpx;
    }
  }
	.bottom{
	  height: 120rpx;
	  width: 700rpx;
	  background-color: rgb(150,90,27);
	  margin: auto;
	  border-radius: 12rpx;
	  padding: 0 10rpx;
	  div{
	    margin-top: 10rpx;
	    display: inline-block;
	  }
	}
  .transitionClass{
    transition: all 1s ease-out !important;
  }
	.card{
	  width: 96rpx;
	  height: 96rpx;
	  border: 1px solid green;
	  line-height: 100rpx;
	  text-align: center;
	  background-color: #f3ffd1;
	  color: #fff;
	  font-size: 72rpx;
	  border-radius: 8rpx;
	  box-shadow: 0 0 20rpx 0 #545454;
	  img{
	    width: 65rpx;
	    height: 65rpx;
      margin-bottom: 6rpx;
	  }
	  .bot{
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    height: 10rpx;
	    background-color: #90ee90;
	    border-bottom-left-radius: 6rpx;
	    border-bottom-right-radius: 6rpx;
	    border-bottom: 4rpx solid green;
	  }
	}
	.btn{
	  display: flex;
	  justify-content: space-around;
	  margin-top: 30rpx;
	}
	.level{
	  height: 100rpx;
	  line-height:100rpx;
	  text-align: center;
	  //font-family: cursive;
	  font-family: "dangledang";
	  font-size: 60rpx;
	  font-weight: bold;
	}
	.author{
	  width: 100%;
	  text-align: center;
	  font-size: 28rpx;
	}
	.version{
	  margin-top: 100rpx;
	  color: #999;
	}
	.btn-style{
		display: inline-block;
		margin: 0 10rpx;
	}
	.disble{
		background-color: #949b7a;
    opacity: .9;
		z-index:0;
	}
	.show{
		z-index:1;
    transition: background-color .4s ease-out;
	}
  .assist{
    position: absolute;
    display: flex;
    justify-content: space-between;
  }
</style>
